/**
 * Created by Administrator on 2017/3/21.
 */
import React, {Component} from 'react';
import { Form, Input, Radio, Select, InputNumber, DatePicker, Badge, Tooltip, Popover } from 'antd';
import {connect} from 'dva';
import moment from 'moment'
import request from '@/utils/request';
import { popoverPrice, renderValveOpen } from '@/utils/utils';
import ReactDataGrid from 'react-data-grid';
const FormItem = Form.Item;
const { TextArea } = Input;
const RadioGroup = Radio.Group;
const Option = Select.Option;
class AddPoliciesForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      price_nature_logs:[],
    };
  }
  componentDidMount() {

    this.fetchPrice_nature_logs();

  }
  fetchPrice_nature_logs=()=>{
    const that = this;
    request(`/accounts/${this.props.id}/price_nature_histories`, {
      method: 'GET',
      params: {
        order_direction:'desc',
      },
    }).then((response) => {
      if (response.status === 200) {
        that.setState({
          price_nature_logs:response.data.data
        })
      }
    });
  }
  render() {
    const defaultColumnProperties = {
      resizable: true,
    };
    const columns= [
      {
        name: '序号',
        width: 50,
        key: '_index',
        formatter: (event) => {
          return <p className={'index'}>{event.value + 1}</p>;
        },
      },
      {
        name: '日期',
        width: 200,
        key: 'date',
      },
      {
        name: '价格性质',
        width: 280,
        key:'name',
        formatter:(event)=>{
          return <Popover title={event.row.price_nature.name} content={popoverPrice(event.row.price_nature)}>
            {event.row.price_nature.name}
          </Popover>
        }
      },
      {
        name: '阶梯数量',
        width: 200,
        key:'level',
        formatter: (event) => {
          return <span title={event.row.price_nature.level}>{event.row.price_nature.level}</span>;
        },
      },
    ].map(c => ({  ...defaultColumnProperties,...c }));

    return (
      <div style={{marginTop:'10px'}}>
        <h3 className={'ant-descriptions-title'}>价格性质变更记录
        </h3>
        <ReactDataGrid
          columns={columns}
          rowGetter={i => {
            return { ...this.state.price_nature_logs[i], _index: i };
          }}
          rowsCount={this.state.price_nature_logs.length}
          minHeight={212}
        />
      </div>
    );
  }
}

const AddPoliciesFormWrap = Form.create()(AddPoliciesForm);
export default connect()(AddPoliciesFormWrap);


